<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { useList, useTabs } from "@/hooks/page";
import {
  my_follow_guider_api,
  my_follow_studio_api,
  my_follow_author_api,
  note_fans_api,
  user_follow_api,
} from "@/package/my/api/guider_didi";
import { data_api } from "@/api/my";
import { EV_USER } from "@/constant/event";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import IndexTypeItem from "../note/components/index-type-item.vue";
import ListEmpty from "@/components/list/empty.vue";
import ListFollowItem from "./components/list-follow-item.vue";
import ListMore from "@/components/list/more.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad((options) => {
  const index = Number(options?.type || 0);
  index === 0 ? tabChange({ detail: { current: 0 } }) : tabClick(index);

  uni.$on(EV_USER, evUserCallback);
});
onUnload(() => uni.$off(EV_USER, evUserCallback));

const typeIndex = ref(0);
const typeList = ["导游", "工作室", "作者"];
const typeClick = (index: number) => {
  if (typeIndex.value === index) return;
  typeIndex.value = index;
  reloadList();
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return typeIndex.value === 0
      ? my_follow_guider_api(query)
      : typeIndex.value === 1
      ? my_follow_studio_api(query)
      : my_follow_author_api(query);
  });
const {
  listData: listData2,
  listStatus: listStatus2,
  listLoadMore: listLoadMore2,
  reloadList: reloadList2,
  loadMoreList: loadMoreList2,
} = useList({ page: 1, page_size: 10 }, (query) => {
  return note_fans_api(query);
});

const tabList = ["关注", "粉丝"];
const { tabData, tabCacheList, tabClick, tabChange } = useTabs(
  (index: number) => {
    index === 0 ? reloadList() : reloadList2();
  }
);

const detailClick = (id: string) => {
  tabData.index === 1 || typeIndex.value === 2
    ? Router.navigateTo(`/package/my/pages/note/index?id=${id}`)
    : typeIndex.value === 0
    ? Router.navigateTo(`/package/guider/pages/detail/index?id=${id}`)
    : Router.navigateTo(`/package/guider/pages/detail/index?id=${id}&isTeam=1`);
};

const myDataFollowList = ref<number[]>([]);
const followClick = (id: number) => {
  const fn = (type: number) => {
    user_follow_api({ follow_id: id, type }).then(() => {
      uni.$emit(EV_USER, { type: "follow", data: { id } });
    });
  };

  if (tabData.index === 0) {
    // 关注 tab，点击取消关注
    popupModal.value?.show({ content: "是否确认要取消关注？" }, () => {
      fn(typeIndex.value + 1);
    });
  } else {
    user_follow_api({ follow_id: id, type: 3 }).then(() => {
      uni.$emit(EV_USER, { type: "follow", data: { id } });
    });

    myDataFollowList.value.includes(id)
      ? popupModal.value?.show({ content: "是否确认要取消关注？" }, () => fn(3))
      : fn(3);
  }
};

const reloadMyData = () => {
  return data_api<{
    note_author_follow?: number[];
  }>({
    includes: "note_author_follow",
  }).then((resp) => {
    myDataFollowList.value = resp.note_author_follow || [];
  });
};
const evUserCallback = (e: { type: "follow" }) => {
  console.info(`触发事件：${EV_USER}`, e);
  if (e.type === "follow") {
    // 刷新列表
    reloadList();

    reloadMyData();
  }
};

const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <NavBack />
  <NavBar position="relative" background="#ffffff">
    <view class="list-nav">
      <view
        class="list-nav-item"
        v-for="(i, d) of tabList"
        :key="d"
        @click="tabClick(d)"
      >
        <IndexTypeItem :text="i" :isActive="tabData.index === d" />
      </view>
    </view>
  </NavBar>

  <swiper
    class="list-swiper"
    :current="tabData.current"
    :style="{
      height: `calc(100vh - ${AppData.rectData.topBarHeight}px)`,
    }"
    @change="tabChange"
  >
    <swiper-item class="list-swiper-item">
      <view class="list-type">
        <view
          class="list-type-item"
          :class="{ 'list-type-active': typeIndex === d }"
          v-for="(i, d) of typeList"
          :key="d"
          @click="typeClick(d)"
        >
          {{ i }}
        </view>
      </view>

      <scroll-view
        class="list-data"
        scroll-y
        @scroll="listLoadMore = true"
        @scrolltolower="loadMoreList"
      >
        <ListEmpty v-if="listData.length === 0 && listStatus === 'noMore'" />
        <template v-else>
          <view class="list-data-wrapper">
            <view
              class="list-data-item"
              v-for="i of listData"
              :key="i.id"
              @click="detailClick(i.guider_id || i.uid)"
            >
              <ListFollowItem :info="i">
                <view
                  class="list-data-btn"
                  @click.stop="followClick(i.guider_id || i.uid)"
                >
                  <template v-if="i.is_follow === 1">
                    <image
                      class="list-data-btn2"
                      src="@/package/my/static/follow-list-each.png"
                    />
                    互相关注
                  </template>
                  <template v-else>已关注</template>
                </view>
              </ListFollowItem>
            </view>
          </view>
          <ListMore
            v-if="listLoadMore"
            :status="listStatus"
            safeAreaInsetBottom
          />
        </template>
      </scroll-view>
    </swiper-item>

    <swiper-item>
      <scroll-view
        class="list-data"
        scroll-y
        @scroll="listLoadMore2 = true"
        @scrolltolower="loadMoreList2"
      >
        <ListEmpty v-if="listData2.length === 0 && listStatus2 === 'noMore'" />
        <template v-else>
          <view class="list-data-wrapper">
            <view
              class="list-data-item"
              v-for="i of listData2"
              :key="i.id"
              @click="detailClick(i.uid)"
            >
              <ListFollowItem :info="i">
                <view
                  class="list-data-btn"
                  :class="{
                    'list-data-btn3': myDataFollowList.includes(i.uid),
                  }"
                  @click.stop="followClick(i.uid)"
                >
                  {{ myDataFollowList.includes(i.uid) ? "互相关注" : "回关" }}
                </view>
              </ListFollowItem>
            </view>
          </view>
          <ListMore
            v-if="listLoadMore2"
            :status="listStatus2"
            safeAreaInsetBottom
          />
        </template>
      </scroll-view>
    </swiper-item>
  </swiper>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-bottom: 0;
}

.list-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  padding-right: 60rpx;
  transform: translate(-50%, -50%);

  .list-nav-item {
    padding: 0 50rpx;
  }
}

.list-swiper {
  .list-swiper-item {
    padding-top: 80rpx;
    box-sizing: border-box;
  }
}

.list-type {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80rpx;
  background-color: #ffffff;

  .list-type-item {
    padding: 0 50rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 60rpx;
  }

  .list-type-active {
    color: #333333;
    font-weight: bold;
  }
}

.list-data {
  height: 100%;

  .list-data-wrapper {
    padding-top: 20rpx;
  }

  .list-data-item {
    margin: 0 30rpx 20rpx;
  }

  .list-data-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    min-width: 90rpx;
    height: 48rpx;
    padding: 0 18rpx;
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
    border-radius: 28rpx;
    border: 2rpx solid #e5e5e5;
  }

  .list-data-btn2 {
    width: 28rpx;
    height: 28rpx;
    margin-right: 4rpx;
  }

  .list-data-btn3 {
    color: #ff7900;
    border-color: #ff7900;
  }
}
</style>